<template>
	<view class="mx-vip-card">
		<view class="card-img" :style="{backgroundImage: `url(${cardImg(info.image.file_path)})`}">
			<view class="card-type">
				{{info.card_name}}
			</view>
			<view v-if="info.type == 0" class="card-expire">
				剩余：{{info.remaining_day}}天
			</view>
			<view v-if="info.type == 1" class="card-expire">
				剩余{{info.remaining_times}}次
			</view>
			
			<view v-if="info.type == 1" class="card-expire-day">
				有效期至：{{expiration}}
			</view>
		</view>
		<view class="option">
			<view class="card-detail" @tap="toDetail">
				<image src="/static/imgs/icon-card-detail.png"></image>
				<view>会员卡详情</view>
			</view>
			<view class="card-code" @tap="toCode">
				<image src="/static/imgs/icon-card-code.png"></image>
				<view>二维码</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { imgUrl } from '@/utils/config.js'
	import dayjs from 'dayjs'
	
	export default {
		name:"MxVipCard",
		props: {
			info: {
				type: Object
			}
		},
		data() {
			return {
			};
		},
		computed: {
			cardImg() {
				return (name) => {
					return imgUrl + name
				}
			},
			
			expiration() {
				return dayjs().add(this.info.remaining_day, 'day').format('YYYY-MM-DD')
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: "/pages/mine/my-card-detail",
					success: res => {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('acceptDataFromOpenerPage', this.info)
					}
				})
			},
			
			toCode() {
				uni.navigateTo({
					url: `/pages/mine/my-card-code?orderId=${this.info.order_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/var.scss';
	@import '@/common/scss/mixins.scss';
.mx-vip-card{
	display: inline-flex;
	width: 700rpx;
	height: 406rpx;
	box-shadow: 0 0 6px 0 rgba($color: #000000, $alpha: .16);
	border-radius: 5px;
	flex-direction: column;
	font-family: $font-family;
	
	.card-img{
		position: relative;
		width: 700rpx;
		height: 408rpx;
		@include bg-img-cover;
		
		.card-type{
			position: absolute;
			top: 32rpx;
			left: 34rpx;
			font-size: 16px;
			font-weight: 600;
		}
		
		.card-expire{
			position: absolute;
			right: 26rpx;
			bottom: 32rpx;
			font-size: 14px;
			font-weight: 600;
		}
		
		.card-expire-day{
			position: absolute;
			left: 26rpx;
			bottom: 32rpx;
			font-size: 14px;
			font-weight: 600;
		}
	}
	
	.option{
		width: 100%;
		height: 86rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.card-detail{
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			&>image{
				width: 28rpx;
				height: 30rpx;
			}
			
			&>view{
				margin-left: 22rpx;
				font-size: 16px;
				line-height: 16px;
			}
			
			&::after{
				position: absolute;
				right: 0;
				top:50%;
				transform: translateY(-50%);
				content: "";
				width:1px;
				height: 50rpx;
				background-color: $color-border;
			}
		}
		
		.card-code{
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			&>image{
				width: 30rpx;
				height: 30rpx;
			}
			
			&>view{
				margin-left: 22rpx;
				font-size: 16px;
				line-height: 16px;
			}
		}
	}
}
</style>
